<template>
  <div class="center-setting publicServe">
    <!-- <div class="protextRights-menu">
      <ProtectBlock
        v-for="(item, index) in menuList"
        :key="index"
        :menuItem="item"
        class="protextRights-menu-item"
        @protectBlockClick="protectBlockClick"
      ></ProtectBlock>
    </div>
    <div class="protextRights-contnet">
      <component :data="content.data" :is="curComponents" />
    </div> -->
    <Side
      :menuList="menuList"
      @sideMenuClick="sideMenuClick"
      :selectKeys="selectKeys"
    ></Side>
    <TitleCard
      :title="title"
      :showMore="false"
      :loading="loading"
      :isEmpty="isEmpty"
      :isSwitch="false"
      :type="'threeCard'"
      class="publicServe-body"
    >
      <div class="publicServe-contnet">
        <component
          :data="content.data"
          :is="curComponents"
          @switchForm="handleSwitch"
        />
      </div>
    </TitleCard>
  </div>
</template>

<script>
import Side from '@/views/components/side'
import { menuList, nameMap, allTitleMap } from './config.js'
// import ProtectBlock from '@/views/components/pageComponents/protectBlock.vue'
import Brief from '../components/brief.vue'
import AidOnline from './pages/aidOnline.vue'
import OverseaOnline from './pages/overseaOnline.vue'
import DisputeOnline from './pages/disputeOnline.vue'
import InBrandOnline from './pages/inBrandOnline.vue'
import OutBrandOnline from './pages/outBrandOnline.vue'
import { getContent, getLink } from '@/api/frontCommon'
import { getTimeLimit } from '@/api/linkManage'
import FrontMixins from '@/mixins/frontMixin'

export default {
  mixins: [FrontMixins],
  data() {
    return {
      nameMap,
      allTitleMap,
      menuList,
      loading: false,
      isEmpty: false,
      curComponents: '',
      title: '窗口业务简介',
      selectKeys: [],
      content: {},
      id: '',
      link: {}
    }
  },
  components: {
    Side,
    // ProtectBlock,
    Brief,
    AidOnline,
    OverseaOnline,
    DisputeOnline,
    OutBrandOnline,
    InBrandOnline
  },
  mounted() {
    //刷新页面响应
    let { toComponent, id } = this.$route.query
    this.initSelectKeys(toComponent) //对应更新menu的select值
    this.sideMenuClick(toComponent, id)
  },
  watch: {
    //作用在于导航栏点击时触发响应
    $route: {
      handler: function (val) {
        const { toComponent, id, fromMenu } = val.query
        if (fromMenu) { //因为要记录菜单点击，但是记录时会重复触发该方法，限制只在导航栏点击触发
          this.initSelectKeys(toComponent) //对应更新menu的select值
          this.sideMenuClick(toComponent, id)
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  methods: {
    initSelectKeys(key) {
      if (!key) return
      if (nameMap[key]) {  //有二级菜单情况
        const parent = nameMap[key]
        this.selectKeys = [parent, key]
      } else {
        this.selectKeys = [key]  //有一级菜单情况
      }
    },
    sideMenuClick(key) {
      if (key === 'noOpen') return this.info()  //限制title赋值
      this.$router.push({ name: 'protectRights', query: { toComponent: key } }) //记录菜单点击
      this.allTitleMap.forEach(item => {  //更新对应选项的title值
        if (item.value === key) {
          key === 'evidentOnline' || key === 'adjudicGuide' || key === 'mediateGuide' ? '' : this.title = item.title
          this.id = item.id
        }
      })
      this.handleSwitch(key, this.id)
    },
    async handleSwitch(value, id) {
      const timeLimit = ['aidOnline', 'overseaOnline', 'disputeOnline', 'inBrandOnline', 'outBrandOnline']
      if (timeLimit.indexOf(value) !== -1) {  //后台关闭此功能
        const { data } = await getTimeLimit(id)
        if (data == 0) return this.info()
      }
      switch (value) {
        case 'aidOnline':
          this.curComponents = 'AidOnline'
          break;
        case 'overseaOnline':
          this.curComponents = 'OverseaOnline'
          break;
        case 'disputeOnline':
          this.curComponents = 'DisputeOnline'
          break;
        case 'inBrandOnline':
          this.curComponents = 'InBrandOnline'
          break;
        case 'outBrandOnline':
          this.curComponents = 'OutBrandOnline'
          break;
        case 'evidentOnline':  //已在菜单组件限制菜单项选中
        case 'adjudicGuide':
        case 'mediateGuide':
          this.link = await getLink(id)
          window.open(this.link.data.link)
          break
        default:
          this.content = await getContent(id)
          this.curComponents = 'Brief'
          break;
      }
    }
  }
}
</script>
